<template>
  <div ref="StackedBar" :style="{width:width,height: height}"></div>
</template>
<script>
export default {
  name: 'StackedBar',
  data() {
    return {
      newStackedData:[]
    }
  },
  props:{
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
    data:{
      type:Array,
      default:()=>[]
    }
  },
  watch:{
    data:{
      handler(val){
        this.newStackedData = val;
        this.getEchart()
      }
    }
  },
  mounted() {
  },

  methods: {
    getEchart() {
      var mychartActivity = this.$echarts.init(this.$refs.StackedBar);
      let xAxisATT = this.newStackedData[0]
      let color=[
          '#0090ff',
          '#06d3c4',
          '#ffbc32',
          '#2ccc44',
          '#ff3976',
          '#6173d6',
          '#ff9f7e',
          '#5f71d2',
          '#f36f8a',
          '#5fd27b',
          '#6173d6',
          '#47dfae',
          '#4ac7f5',
          '#f36f8a',
          '#42a4eb',
          '#426eeb',
          '#5f71d2',
          '#f36f8a'
        ];
      let optionActivity = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: 'rgba(0,0,0,0.6)',
          textStyle: { // 文字提示样式
            align: 'left',
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          formatter: function(params){
            let str = params[0].axisValue + "</br>"
            params.reverse().forEach(item=>{
              if(item.data.inArea == 1){
                str = str +item.marker+ item.seriesName + " : " + item.data.value + "</br>"
              }
            })
            return str
          },
        },
        
        grid: {
          left: '7%',
          top: '12%',
          right: '2%',
          bottom: '10%'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: false, // 不显示x轴的刻度
            // data: data,
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            data: xAxisATT
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: false, // 不显示y轴的刻度
            axisLabel: {
              formatter: '{value}'
            },
            name: '时间/分钟',
            splitLine: {
              lineStyle: {
                show: 'false',
                type: 'dashed',
                color: '#DDD'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          }
        ],
        dataZoom:[
          {
            type: 'slider',
            realtime: true,
            start: 0,
            end: xAxisATT.length >= 15 ?40:100,  // 初始展示40%
            height: 4,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)", 
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top:'96%',
            
            // zoomLock:true, // 是否只平移不缩放
            // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
            // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
          },
          // { 
          //   type: "inside",  // 支持内部鼠标滚动平移
          //   start: 0,
          //   end: 40,
          //   zoomOnMouseWheel: false,  // 关闭滚轮缩放
          //   moveOnMouseWheel: true, // 开启滚轮平移
          //   moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          // }
        ],
        series: [
          // {
          //   name: '区域内超过50%的时间',
          //   type: 'bar',
          //   stack: '饱和度',
          //   barWidth: 10,
          //   data: data
          // },
        ]
      }
      let _this = this;
      this.newStackedData[2].map((item,i)=>{
        let data = [];
        // item.data.forEach(el => {
        //   if (el.inArea == 1) {
        //     data.push(el.value)
        //   }
        // });
        // console.log(data);
        optionActivity.series.push(
          {
            name:  _this.newStackedData[1][i],
            type: 'bar',
            barWidth: 16,
            stack: 'total',
            label: {
              show: false
            },
            // itemStyle: {
            //   //通常情况下：
            //   normal: {
            //     color: {
            //       colorStops: [
            //         {
            //           offset: 0,
            //           color: this.color[1]
            //         },
            //         {
            //           offset: 1,
            //           color: this.color[0]
            //         }
            //       ],
            //     },
            //     barBorderRadius: [0, 15, 15, 0]
            //   }
            // },
            // emphasis: {
            //   focus: 'series'
            // },
            data: item
          },
        );
      })
      mychartActivity.setOption(optionActivity)
      window.addEventListener("resize", ()=>{
        mychartActivity.resize();
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
